<template>
  <view class="page">
    <u-sticky>
      <view :style="{ padding: '20rpx', background: '#fff' }">
        <u-input
          v-model="searchText"
          placeholder="搜索你需要的内容"
          suffix-icon="search"
          suffix-icon-style="color: #909399"
          shape="circle"
          border="none"
          font-size="13px"
          @confirm="handleSearch"
          @clear="handleClear"
          :custom-style="{
            background: '#FBFBFB',
            padding: '6px',
          }"
          clearable
        />
      </view>
    </u-sticky>
    <view class="record-item" v-for="(i, k) in dataList" :key="k">
      <u-row custom-style="margin-bottom: 30rpx">
        <u-col span="4"> 商铺名称 </u-col>
        <u-col span="8" textAlign="right">
          <text style="color: #4497fb">{{ i.shopname || "-" }}</text>
        </u-col>
      </u-row>
      <u-row custom-style="margin-bottom: 30rpx">
        <u-col span="4"> 核销账号 </u-col>
        <u-col span="8" textAlign="right">
          <text style="color: #ff5555">{{ i.username || "-" }}</text>
        </u-col>
      </u-row>
      <u-row custom-style="margin-bottom: 30rpx">
        <u-col span="4"> 商品名称 </u-col>
        <u-col span="8" textAlign="right"> {{ i.title || "-" }} </u-col>
      </u-row>
      <u-row custom-style="margin-bottom: 30rpx">
        <u-col span="4"> 商品价格 </u-col>
        <u-col span="8" textAlign="right"> {{ i.actual_payment || "0" }}元 </u-col>
      </u-row>
      <u-row custom-style="margin-bottom: 30rpx">
        <u-col span="4"> 订单编号 </u-col>
        <u-col span="8" textAlign="right"> {{ i.order_no || "-" }} </u-col>
      </u-row>
      <u-row custom-style="margin-bottom: 30rpx">
        <u-col span="4"> 下单时间 </u-col>
        <u-col span="8" textAlign="right">
          {{ i.createtime ? $timeFormat(i.createtime, "yyyy-mm-dd hh:MM") : "-" }}
        </u-col>
      </u-row>
      <u-row custom-style="margin-bottom: 30rpx">
        <u-col span="4"> 支付时间 </u-col>
        <u-col span="8" textAlign="right">
          {{ i.paymenttime ? $timeFormat(i.paymenttime, "yyyy-mm-dd hh:MM") : "-" }}
        </u-col>
      </u-row>
      <u-row>
        <u-col span="4"> 核销时间 </u-col>
        <u-col span="8" textAlign="right">
          {{ i.paymenttime ? $timeFormat(i.verify_time, "yyyy-mm-dd hh:MM") : "-" }}
        </u-col>
      </u-row>
    </view>
    <u-loadmore :status="status" />
  </view>
</template>

<script>
import { orderList } from "@/request/api.js";
export default {
  data() {
    return {
      searchText: "", //搜索内容
      page: 1, //页数
      total: 0, // 总数
      dataList: [], //数据列表
      status: "loadmore", // 加载状态
    };
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.handleSearch();
  },
  // 上拉加载
  onReachBottom() {
    if (this.total > this.storyList.length) {
      this.page++;
      this.getDataList();
    }
  },
  created() {
    this.getDataList();
  },
  methods: {
    // 清空搜索
    handleClear() {
      this.searchText = "";
      this.handleSearch();
    },
    // 搜索
    handleSearch() {
      this.page == 1;
      this.total = 0;
      this.dataList = [];
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      let data = {
        search: this.searchText,
        page: this.page,
        pageSize: 10,
        token: uni.getStorageSync("TOKEN"),
      };
      this.status = "loading";
      orderList(data)
        .then((res) => {
          if (res.code == 1) {
            this.dataList =
              this.page == 1 ? res.data.list : this.dataList.concat(res.data.list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total >= this.dataList.length ? "nomore" : "loadmore";
          uni.stopPullDownRefresh();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.record-item {
  padding: 40rpx;
  border-radius: 20rpx;
  box-shadow: 0 0 10rpx #e2e2e2;
  margin: 0 20rpx 20rpx 20rpx;
  overflow: hidden;
}
/deep/.u-col-4 {
  font-size: 28rpx;
  color: #222222;
}
/deep/.u-col-8 {
  font-size: 28rpx;
  color: #979797;
  word-break: break-all;
}
</style>
